<!--积分商城-->
<template>
  <div>
    <div class="top-header" :style="{ backgroundImage: 'url(' + checkInBackImg + ')' }">
      <rtheader :title="'签到'" :ischeckin='true' :showrule="false" :ruletext="''"></rtheader>
      <div class="check-box">
        <!--        <div class="flex1 v-c icon-left titletop" @click="gopointdetail()">-->
        <!--          <span class="yl-my-lvb lvb-icon"></span>-->
        <!--          <span >{{coin}}</span>-->
        <!--        </div>-->
        <div class="check-btn" @click="gocheckcin()">
          <span v-if="signType==0">签到</span>
          <span v-else-if="signType==1">今日<br />已签到</span>
          <!--          <div class="outer a-c checkincommon" v-if="signType==0">-->
          <!--            <div class="inner-check a-c">-->
          <!--              <span class="check-number">签到</span>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="checkinouter a-c checkincommon" v-else-if="signType==1">-->
          <!--            <span class="checkintitle">今日</span>-->
          <!--            <span class="checkincontetn">已签到</span>-->
          <!--          </div>-->
        </div>
        <!--        <div  class="flex1 lvb-how v-c icon-right titletop" @click="goexchangerecode()">-->
        <!--          <span class="yl-ji-dui lvb-icon lvb-how"></span>-->
        <!--          <span class="lvb-how">兑换记录</span>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="lucky-ro-con v-c" v-if="drawId!=null" @click="gorotate()">
      <div class="chou-con v-c">
        <img src="~img/ji-zhuan.png" class="chou-img">
        <div class="chou-des">
          <p class="big-title">幸运抽大奖</p>
          <p>小绿币抽大奖</p>
        </div>
      </div>
      <div class="chou-btn">
        <div class="a-c chou-back">
          <span>立即抽奖</span>
        </div>
      </div>
    </div>
    <div class="check-record">
      <div class="check-record-item" @click="gopointdetail()">
        <span>我的绿币：</span>
        <em style="color: #FB685B;font-size: 0.4rem;font-style: normal">{{coin}}</em>
      </div>
      <div class="check-record-item" @click="goexchangerecode()">
        <span style="color: #999;">兑换记录</span>
        <img src="../../assets/arrow-right.png">
      </div>
    </div>
    <div class="rotatep" :style="{'top':drawId==null?'6.5rem':'5.05rem'}">
      <span>兑换专区</span>
      <div class="a-c" style="align-items: center;" @click="exchangerule()">
        <img src="../../assets/icon-help.png" style="width: 0.32rem;height: 0.32rem;margin-right: 0.06rem" />
        <span class="exchangerule">兑换规则</span>
      </div>
    </div>
    <div class="loadmore-container scrollstyle" ref="pointsmallWrapper" :style="{'top':drawId==null?'7.5rem':'5.98rem'}">
      <div class="loadmore-ul" style="width:100%;">
        <ul class="d-u">
          <li v-for="(items,i) in list" :key="i">
            <div @click="gourl('/goodsdetail',items.id)">
              <exchangegoods :title="items.name" :price="items.price" :picture="items.picUrl" :originalPrice="items.originalPrice.toFixed(2)" :exchangeEndTime="items.exchangeEndTime"
                :exchangeStartTime="items.exchangeStartTime" :stock="items.stock"></exchangegoods>
            </div>
          </li>
        </ul>
        <div class="shuoshuo-new" v-if="listnodata" style="height:3rem;width:100%;justify-content: center;">
          <span class="yl-2kong nosvg" style="margin-top:1.5rem">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">还没有商品哦~</span>
        </div>
        <p :style="{'padding-bottom':drawId==null?'3.8rem':'5rem'}"></p>
      </div>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
import exchangegoods from "src/components/pointsmall/exchangegoods.vue";
import rtheader from "src/components/rotate/rt-header.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "pointsmall",
  data () {
    return {
      listnodata: "",
      type: 0,
      page: 1,
      totalPage: "",
      is_r: false,
      obj: "",
      coin: "",
      signType: "", //是否签到，0否1是
      drawId: "",
      list: [],
      drawType: "", //抽奖类型 0原型转盘，1方形转盘，2老虎机
      backgroundType: "",
      checkInBackImg: "",
      signBackground: "",
    };
  },
  computed: {
    ...mapState(["usercoin"])
  },
  components: {
    api,
    ylheader,
    exchangegoods,
    rtheader
  },
  mounted () {
    this.haveDraw();
    this.getCoinShopIndex().then(res => {
      this.initScroll();
    });
  },
  methods: {
    ...mapMutations(['changeusercoin']),
    exchangerule () {
      this.$router.push({ path: "/activityrule", query: { tag: 5 } });
    },
    gopointdetail () {
      this.$router.push({ path: "/pointsdetail", query: { coin: this.coin } });
    },
    goexchangerecode () {
      this.$router.push({ path: "/exchangerecode", query: { tag: 1 } });
    },
    gourl (data, goodsId) {
      this.$router.push({
        path: data,
        query: { goodsId: goodsId, coin: this.coin }
      });
    },
    gocheckcin () {
      this.$router.push({ path: "/checkin", query: { backgroundType: this.backgroundType, signBackground: this.signBackground, isSign: this.signType } });
    },
    gorotate () {
      if (this.drawId != null) {
        switch (this.drawType) {
          case 0:
            this.$router.push({
              path: "/roundrotate",
              query: { drawId: this.drawId }
            });
            break;
          case 1:
            this.$router.push({
              path: "/squarerotate",
              query: { drawId: this.drawId }
            });
            break;
          case 2:
            this.$router.push({
              path: "/slotrotate",
              query: { drawId: this.drawId }
            });
            break;
          default:
            break;
        }
      }
    },
    getdraw () {
      api.getdraw({ drawId: this.drawId }).then(res => {
        if (res.success) {
          this.drawType = res.data.drawType;
        }
      });
    },
    haveDraw () {
      api.haveDraw().then(res => {
        if (res.success) {
          this.drawId = res.drawId;
          if (this.drawId != null) {
            this.getdraw();
          }
        }
      });
    },
    getCoinShopIndex () {
      let p = new Promise((resolve, reject) => {
        api.getCoinShopIndex().then(res => {
          if (res.success) {
            this.changeusercoin(res.data.coin);
            this.signType = res.data.signType;
            this.backgroundType = res.data.backgroundType;
            this.signBackground = res.data.signBackground;
            this.getCheckInBg(res.data.shopBackground)
            this.coin = res.data.coin;
            this.totalPage = res.data.totalPage;
            this.list = this.is_r
              ? [...this.list, ...res.data.goods]
              : res.data.goods;
            if (this.page < res.data.totalPage) {
              this.is_r = false;
            }
            if (this.list.length == 0) {
              this.listnodata = true;
            } else {
              this.listnodata = false;
            }
            if (this.myscroll) {
              this.$nextTick(() => {
                this.myscroll.refresh();
              });
            }
            resolve("获取商城列表....");
          }
        });
      });
      return p;
    },
    getCheckInBg (shopBackground) {//更改签到背景
      if (shopBackground != null) {
        this.checkInBackImg = shopBackground
      } else {
        switch (String(this.backgroundType)) {
          case "1":
            this.checkInBackImg = "https://youlingqinius.wonderlandnet.cn/jf-bg.png"
            break;
          case "2":
            this.checkInBackImg = "https://youlingqinius.wonderlandnet.cn/qiandao-snow1.png"
            break;
          case "3":
            this.checkInBackImg = "https://youlingqinius.wonderlandnet.cn/qiandao-newyear.png"
            break;
          default:
            this.checkInBackImg = "https://youlingqinius.wonderlandnet.cn/jf-bg.png"
            break;
        }
      }
    },
    initScroll () {
      let p = new Promise((resolve, reject) => {
        let pointsmallWrapper = this.$refs.pointsmallWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(pointsmallWrapper, {
            preventDefault: false,
            onScrollMove: function () {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                if (_this.page < _this.totalPage) {
                  _this.page++;
                  _this.getCoinShopIndex();
                }
              }
            },
            onScrollEnd: function () { },
            onScrollStart: function () {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    }
  }
};
</script>
<style lang="less" scoped>
.check-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.8rem;
}
.check-btn {
  width: 2.2rem;
  height: 2.2rem;
  background: url('https://youlingqinius.wonderlandnet.cn/youlin-check-bg.png');
  background-size: 100%;
  color: #fc6855;
  font-size: 0.44rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.44rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.check-record {
  width: 6.9rem;
  height: 0.96rem;
  padding: 0 0.32rem;
  background: #fff;
  border-radius: 0.1rem;
  position: fixed;
  top: 5.3rem;
  left: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 0.28rem;
}
.check-record-item {
  display: flex;
  align-items: center;
}
.check-record-item img {
  width: 0.24rem;
  height: 0.24rem;
  margin-left: 0.1rem;
}
.scrollstyle {
  position: fixed;
  top: 5.98rem;
  width: 100%;
}
.top-header {
  width: 100%;
  height: 5.8rem;
  position: fixed;
  top: 0;
  left: 0;
  // background: url("https://youlingqinius.wonderlandnet.cn/jf-bg.png") no-repeat ;
  //background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
  .icon-left {
    margin-left: 0.3rem;
  }
  .icon-right {
    margin-right: 0.3rem;
  }
  span {
    font-size: 0.36rem;
    font-family: PingFangSC-Medium, sans-serif;
  }
  .lvb-icon {
    padding: 0.02rem 0.06rem 0 0;
  }
  .lvb-how {
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 0.3rem;
    text-align: right;
    justify-content: flex-end;
  }
  .checkincommon {
    border-radius: 50%;
    width: 1.62rem;
    height: 1.62rem;
  }
  .checkinouter {
    border: 1px solid #ffffff;
    flex-direction: column;
    span {
      font-size: 0.32rem;
      line-height: 0.5rem;
    }
  }
  .outer {
    background: #fc907d;
    .inner-check {
      width: 1.48rem;
      height: 1.48rem;
      color: #f97165;
      border-radius: 50%;
      background-color: #fff;
      .check-number {
        color: #fb685b;
        font-size: 0.34rem;
      }
    }
  }
}
.lucky-ro-con {
  height: 1.6rem;
  padding: 0 0.3rem;
  position: fixed;
  width: 100%;
  top: 3.5rem;
  background: #ffffff;
  justify-content: space-between;
  .chou-con {
    display: flex;
    flex-direction: row;
    .chou-img {
      width: 1.48rem;
      height: 1.48rem;
    }
    .chou-des {
      line-height: 0.48rem;
      padding-left: 0.1rem;
      font-size: 0.24rem;
      color: #999999;
      .big-title {
        font-family: PingFangSC-Medium, sans-serif;
        font-size: 0.36rem;
        color: #3a3a3a;
      }
    }
  }
  .chou-btn {
    height: 0.87rem;
    line-height: 0.7rem;
    font-family: PingFangSC-Medium, sans-serif;
    color: #ffffff;
    width: 2.11rem;
    .chou-back {
      height: 100%;
      background: url('~img/ji-button.png') no-repeat center top;
      background-size: 2.1rem 100%;

      span {
        padding-bottom: 0.1rem;
      }
    }
  }
}
.rotatep {
  width: 100%;
  height: 0.88rem;
  padding: 0 0.3rem;
  color: #333;
  font-size: 0.32rem;
  position: fixed;
  top: 5.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-u {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  align-content: flex-start;
  li {
    padding-left: 0.28rem;
    max-width: 50%;
  }
}
.exchangeicon {
  padding: 0.04rem 0.03rem 0 0;
  font-size: 0.24rem;
}
.exchangerule {
  color: #999;
  font-size: 0.28rem;
}
</style>


